
<template>
  <div id="makeCall">
  		<magic-header titleName="拨打电话" v-if="this.$.isWxPublic"></magic-header>
		<section>
			<article class="scan">
				<img :src="flagImg" alt="" />
				<a class="mui-btn mui-btn-block mui-btn-yellow" id='tel' :href="tel">
					确认拨打挪车电话
				</a>
			</article>
		</section>
  </div>
</template>

<script>
import magicHeader from "components/magicHeader";
import flagImg from "assets/flagImg.png";
export default {
  data() {
    return {
      flagImg:flagImg,
      tel:''
    };
  },
  created() {
    console.log(this.$route.params.phoneNumber)
    this.tel = 'tel:'+this.$route.params.phoneNumber
    console.log(this.tel);
  },
  components: {
    magicHeader
  }
};
</script>
<style scoped="scoped">
#makeCall .mui-btn-block {
  font-size: 18px;
  display: block;
  width: 100%;
  margin-bottom: 10px;
  padding: 15px 0;
}
#makeCall .mui-btn-yellow {
  color: #fff;
  border: 1px solid #f0ad4e;
  background-color: #f0ad4e;
}
#makeCall .mui-btn {
  font-size: 14px;
  font-weight: 400;
  height: 44px;
  line-height: 30px;
  position: relative;
  display: inline-block;
  margin-bottom: 0;
  padding: 6px 12px;
  cursor: pointer;
  -webkit-transition: all;
  transition: all;
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
  -webkit-transition-duration: 0.2s;
  transition-duration: 0.2s;
  text-align: center;
  vertical-align: top;
  white-space: nowrap;
  color: #333;
  border: 1px solid #ccc;
  border-radius: 3px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
  background-color: #fff;
  background-clip: padding-box;
}
#makeCall .scan {
		padding: 1rem;
			display: flex;
			flex-flow: column wrap;
			justify-content: center;
			align-content: center;
			padding-top: 1rem;
		}
		
#makeCall	.scan img {
			width: 50%;
			margin: auto;
			margin-bottom: 1rem;
			border-radius: 100%;
		}
#makeCall #tel{
  color: #fff;
  background-color: #f0ad4e
}
</style>